forum

Home / DeveloperSection / Forums / Creating Responsive Designs with Media Queries

Ask Question

Creating Responsive Designs with Media Queries

Sanjay Goenka 138 05-Jun-2024

Creating Responsive Designs with Media Queries

css-css3 css-css3  css 
Updated on 05-Jun-2024
Sanjay Goenka

Sanjay Goenka

Follow
Economics can be broken down into microeconomics, which looks at individual decisions, and macroeconomics, which is concerned with the economy as a whole. Both types of economics utilize historical trends and current conditions to inform business decision-making and make predictions about how markets might behave in the future. Students who choose to study economics not only gain the skills needed to understand complex markets but come away with strong analytical and problem-solving skills.

Can you answer this question?

Answer

1 Answers

Ravi Vishwakarma

Ravi Vishwakarma

05-Jun-2024

Creating responsive designs with media queries involves adjusting the layout and styles of a webpage based on the characteristics of the device or viewport size. Media queries allow you to apply CSS rules based on conditions such as screen width, height, orientation, and more. Here's how you can create responsive designs using media queries:

/* Default styles */
.element {
  /* Styles common to all screen sizes */
}

/* Media query for small screens */
@media screen and (max-width: 600px) {
  .element {
    /* Styles for screens up to 600px wide */
  }
}

/* Media query for medium screens */
@media screen and (min-width: 601px) and (max-width: 1024px) {
  .element {
    /* Styles for screens between 601px and 1024px wide */
  }
}

/* Media query for large screens */
@media screen and (min-width: 1025px) {
  .element {
    /* Styles for screens wider than 1024px */
  }
}

Common Media Query Features:

Screen Width: Adjust styles based on the width of the viewport.

@media screen and (max-width: 768px) { /* Styles for screens up to 768px wide */ }

Orientation: Apply styles based on the orientation of the device (landscape or portrait).

@media screen and (orientation: landscape) { /* Landscape styles */ }

Device Pixel Ratio (Retina Displays): Adjust styles based on the device's pixel density.

@media screen and (min-resolution: 2dppx) { /* Styles for high-density displays */ }

Device Type: Target specific types of devices (e.g., screen, print).

@media print { /* Styles for printing */ }

Combining Conditions: Combine multiple conditions using logical operators (and, or, not).

@media screen and (min-width: 768px) and (max-width: 1024px) { /* Styles for tablets */ }

 

Best Practices:

Mobile-first Approach: Start with styles for small screens and progressively enhance for larger screens using media queries.

Use Relative Units: Utilize percentages, ems, or rems for sizing elements to ensure flexibility across different screen sizes.

Test Across Devices: Test your responsive designs on various devices and screen sizes to ensure they render correctly.

Prioritize Content: Ensure that essential content is accessible and readable on all screen sizes, prioritizing usability over aesthetics.

Graceful Degradation: Design with the concept that older browsers or devices may not support media queries, and ensure that your content remains functional and accessible in such cases.

By using media queries effectively, you can create designs that adapt gracefully to different screen sizes and devices, providing users with an optimal viewing experience across a wide range of devices.

Example -

HTML(index.html)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Design Example</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <div class="item">Item 1</div>
        <div class="item">Item 2</div>
        <div class="item">Item 3</div>
        <div class="item">Item 4</div>
        <div class="item">Item 5</div>
    </div>
</body>
</html>

CSS (styles.css):

/* Default styles */
.container {
    display: flex;
    flex-wrap: wrap;
}

.item {
    flex: 1 0 45%; /* Two-column layout on larger screens */
    margin: 10px;
    padding: 20px;
    background-color: #3498db;
    color: #fff;
    text-align: center;
}

/* Media query for smaller screens (up to 600px) */
@media screen and (max-width: 600px) {
    .item {
        flex-basis: 100%; /* Single-column layout on smaller screens */
    }
}

Explanation:

  • We start with a simple HTML structure containing a .container div with multiple .item divs.
  • In the CSS, we set the .container to use flexbox to create a flexible layout.
  • Each .item div is given a flex basis of 45%, allowing two items per row on larger screens.
  • We use a media query to target screens with a maximum width of 600px (typically smaller devices like smartphones).
  • Within the media query, we override the flex basis for .item to 100%, forcing a single-column layout on smaller screens.

Result:

  • On larger screens, the items will be displayed in a two-column layout.
  • On smaller screens (600px or less), the items will switch to a single-column layout for better readability and usability on narrow screens.

Liked By